<template>
  <div class="app-container">
    <el-image-viewer
      class="image-viewer"
      v-if="showImageViewer"
      :on-close="handleCloseImageViewer"
      :url-list="images"/>
    <div class="app-content-container">
      <grid-table ref="gridTable"
                  border="inner"
                  name="WxAuthorizer"
                  :loading.sync="loading"
                  :query="query"
                  :perfect="false"
                  :show-search="true"
                  :columns="tableColumns"
                  :table-data="tableData"
                  @cell-dblclick="handleEdit"
                  @remote-method="getList">
      </grid-table>
    </div>
  </div>
</template>

<script>
  import { listAuthorizer } from "@/api/wxmp/authorizer";
  import GridTable from "@/components/GridTable/index";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer';


  export default {
    name: 'Authorizer',
    components: { GridTable, ElImageViewer },
    data() {
      return {
        loading: false,
        showImageViewer: false,
        images: [],
        tableData: [],
        query: {
          pageNum: 1,
          pageSize: 20,
          total: 0,
        },
        tableColumns: [
          { title: '平台appId', width: "auto", field: 'componentAppid', headerAlign: 'center' },
          { title: '公众号appId', width: "auto", field: 'authorizerAppid', headerAlign: 'center' },
          { title: '昵称', width: "auto", field: 'nickName', headerAlign: 'center' },
          { title: '公众号类型', width: "auto", field: 'serviceTypeInfo', headerAlign: 'center' },
          { title: '公众号认证类型', width: "auto", field: 'verifyTypeInfo', headerAlign: 'center' },
          { title: '主体名称', width: "auto", field: 'principalName', headerAlign: 'center' },
          { title: '操作', width: "auto", headerAlign: "center", align: "center",
            slots: {
              default: ({ row }) => {
                return [<el-button type="text" nativeOnClick={ () => { this.handleShowImage(row.headImg); } }>头像</el-button>,
                        <el-button type="text" nativeOnClick={ () => { this.handleShowImage(row.qrcodeUrl); } }>公众号二维码</el-button>,
                        <el-button type="text" nativeOnClick={ () => { this.handleShowImage(row.qrcodeUrl); } }>授权二维码</el-button>]
              }
            }
          }
        ],
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        listAuthorizer().then(response => {
          this.tableData = response.rows;
          this.query.total = response.total;
          this.loading = false;
        })
      },
      handleShowImage(url) {
        console.log(url)
        this.images = [];
        this.images.push(url)
        this.showImageViewer = true;
        console.log(this.images);
      },
      handleCloseImageViewer() {
        this.showImageViewer = false;
      }
    }
  }
</script>

<style scoped>
</style>
